<template>
  <div @mouseover="showset" @mouseout="hideset">
    <a :href="modUrl" class="module_set">
      <div class="n_i " :style="{backgroundColor:moddata.config.backgroundColor}">
        <i :class="['iconfont','moduleIcon',moddata.config.icon?moddata.config.icon:moddata.defaultIcon]" :style="{color:moddata.config.color}"></i>
      </div>
      <div class="m_t" :style="{color:moddata.config.color}">{{moddata.config.title}}</div>
      <div class="visiblebox" v-if="designmode">
        <i :class="['iconfont','icon-attentionfill']" v-show="moddata.visible"></i>
        <i :class="['iconfont','icon-attentionforbidfill']" v-show="!moddata.visible"></i>
      </div>
    </a>
    <div class="mask" v-show="maskshow">
      <div class="settingbtn" @click="headset">
        <i class="el-icon-setting"></i> 设置</div>
      <div class="deletebtn" @click="deletemod">
        <i class="el-icon-delete"></i> 删除</div>
    </div>
  </div>
</template>

<script>
  import {
    MessageBox
  } from 'element-ui'
  export default {
    props: ["moddata", "index", "taskdata" ,"designmode"],
    data: function () {
      return {
        maskshow: false
      }
    },
    computed: {
      modUrl() {
        switch (this.moddata.id) {
          case "TicketType":
            return this.moddata.url + '?taskId=' + this.taskdata.TaskId
            break;
          case "MyTicket":
            return this.moddata.url + '?_taskId_=' + this.taskdata.TaskId
            break;
          case "Sponsor":
            return this.moddata.url + '?sponsorId=' + this.taskdata.Sponsor[0].Id + "&uid=" + this.taskdata.Sponsor[0].UserId;
            break;
          case "Registration":
            return this.moddata.url + '?_taskId_=' + this.taskdata.TaskId + "&checkcode=" + window.CheckInCode;
            break;
          case "Schedule":
            return this.moddata.url + '?_taskId_=' + this.taskdata.TaskId + "&checkInCode="+ window.CheckInCode;
            break;
          case "SignInTrack":
            return this.moddata.url + '?_taskId_=' + this.taskdata.TaskId + "&attendeeId=" + window.AttendId;
            break;
          case "Tools":
            return "/qs/"+this.moddata.config.urlid
            break;
          default:
            return "http://"+this.moddata.url;
        }
      }

    },
    methods: {
      showset: function () {
        this.maskshow = true;
      },
      hideset: function () {
        this.maskshow = false;
      },
      headset: function () {
        this.$emit('setmod', this.moddata.id, this.index, this.moddata.type)
      },
      deletemod: function () {
        this.$emit("delreq", this.index)
      }
    }
  }
</script>

<style scoped>
  .mask .settingbtn {
    color: #fff;
    border-radius: 3px;
    width: 80%;
    text-align: center;
    height: 36px;
    line-height: 34px;
    padding: 0;
    margin-left: 4px;
    font-size: 13px;
    background: #27282d;
    text-shadow: none;
    float: left;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    position: absolute;
    top: 15%;
    right: 10%;
    cursor: pointer;
  }

  .mask .deletebtn {
    color: #fff;
    border-radius: 3px;
    width: 80%;
    text-align: center;
    height: 36px;
    line-height: 34px;
    padding: 0;
    margin-left: 4px;
    font-size: 13px;
    background: #27282d;
    text-shadow: none;
    float: left;
    box-shadow: none;
    border: 1px solid rgba(0, 0, 0, 0.3);
    box-sizing: border-box;
    position: absolute;
    top: 55%;
    right: 10%;
    cursor: pointer;
  }

  .mask .settingbtn:hover,
  .mask .deletebtn:hover {
    background: #35363c;
  }

  .visiblebox{
    position: absolute;
    top:3px;
    right:5px;
  }
</style>